<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-us">
<head>
  <link href="//gmpg.org/xfn/11" rel="profile">
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="generator" content="Hugo 0.69.0" />

  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>简易购物车 &middot; 宋申奥的博客</title>

  
  <link type="text/css" rel="stylesheet" href="/hugo_blog/css/print.css" media="print">
  <link type="text/css" rel="stylesheet" href="/hugo_blog/css/poole.css">
  <link type="text/css" rel="stylesheet" href="/hugo_blog/css/syntax.css">
  <link type="text/css" rel="stylesheet" href="/hugo_blog/css/hyde.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abril+Fatface|PT+Sans:400,400i,700">


  
  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144-precomposed.png">
  <link rel="shortcut icon" href="/favicon.png">

  
  
</head>

  <body class="theme-base-0f ">
  <aside class="sidebar">
  <div class="container sidebar-sticky">
    <div class="sidebar-about">
      <a href="/hugo_blog/"><h1>宋申奥的博客</h1></a>
      <p class="lead">
       这里是宋申奥的个人博客 
      </p>
    </div>

    <nav>
      <ul class="sidebar-nav">
        <li><a href="/hugo_blog/">Home</a> </li>
        
      </ul>
    </nav>

    <p>&copy; 2020. All rights reserved. </p>
  </div>
</aside>

    <main class="content container">
    <div class="post">
  <h1>简易购物车</h1>
  <time datetime=2020-04-21T09:32:11&#43;0800 class="post-date">Tue, Apr 21, 2020</time>
  <h1 id="vue的架构">VUE的架构</h1>
<pre><code>&lt;template&gt;
    &lt;div&gt;
        &lt;!-- 购物车 --&gt;
        &lt;table&gt;
            &lt;tr&gt;
                &lt;td&gt;商品名称&lt;/td&gt;
                &lt;td&gt;商品数量&lt;/td&gt;
                &lt;td&gt;商品价格&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr v-for=&quot;(item,index) in tlist&quot;&gt;
                &lt;td&gt;{{ item.text }}&lt;/td&gt;
                &lt;td&gt;
                    &lt;button @click=&quot;minus(index)&quot;&gt;+&lt;/button&gt;
                    &lt;input type=&quot;text&quot; v-model=&quot;item.num&quot;&gt;
                    &lt;button @click=&quot;add(index)&quot;&gt;+&lt;/button&gt;
                &lt;/td&gt;
                &lt;td&gt;{{ item.price }}&lt;/td&gt;
            &lt;/tr&gt;
        &lt;/table&gt;
        &lt;p&gt;总数量:{{totalcount()}}        总价格:{{pricecount()}}&lt;/p&gt;



        &lt;button @click=&quot;counter++&quot;&gt;+&lt;/button&gt;
        {{counter}}
        &lt;button @click=&quot;counter--&quot;&gt;-&lt;/button&gt;
        
        {{reverse_msg}}
        &lt;ul&gt;
            &lt;li v-for=&quot;(item,index) in tlist&quot;:class=&quot;{on:index%2==0,off:index%2!=0}&quot;&gt;
                {{item.text}}
            &lt;/li&gt;
        &lt;/ul&gt;

        &lt;div v-html=&quot;msg&quot;&gt;&lt;/div&gt;
        {{msg}}
        &lt;h1&gt;{{msg}}&lt;/h1&gt;  
        &lt;h2 v-show=&quot;ok&quot;&gt;Hello world&lt;/h2&gt;
        &lt;h2 v-if=&quot;ok&quot;&gt;Hello world&lt;/h2&gt;

        &lt;div v-if=&quot;type === 'A'&quot;&gt;A&lt;/div&gt;
        &lt;div v-else-if=&quot;type === 'B'&quot;&gt;B&lt;/div&gt;
        &lt;div v-else&gt;不是A也不是B&lt;/div&gt;
    &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
export default {
    //定义数据
    data(){
        return{
            msg:'这是一个变量',
            ok:0,
            type:'A',
            tlist:[{text:'汽车',num:1,price:200},{text:'化妆品',num:1,price:50},{text:'衣服',num:1,price:30},{text:'牛奶',num:1,price:2}],
            counter:0
        }
    },

</code></pre><h1 id="计算属性">计算属性</h1>
<h3 id="1字符串反转">1、字符串反转</h3>
<pre><code>    //计算属性
    computed:{
        reverse_msg:function(){
            console.log(this.msg.split(''));
            return this.msg.split('').reverse().join('');
        }
    },

</code></pre><h3 id="2将变量的值每次更改打印到控制台">2、将变量的值每次更改打印到控制台</h3>
<pre><code>    watch:{
        counter:function(nval,oval){
            console.log('计算器由'+oval+'变换为新的'+nval)
        }
    },
    //钩子方法  created
    mounted:function(){

    },

</code></pre><h1 id="自定义方法">自定义方法</h1>
<h3 id="汇总数量遍历tlist将每条的num参数依次累加得出总数量">汇总数量，遍历tlist，将每条的num参数依次累加，得出总数量</h3>
<pre><code>    //自定义方法
    methods:{
        //汇总数量
        totalcount:function(){
            let total=0;
            for(let i=0,l=this.tlist.length;i&lt;l;i++){
                total += this.tlist[i].num;
            }

            return total;
        },

</code></pre><h3 id="汇总价格遍历tlist将每条的num参数和price相乘后得到单品总价然后相加到pricenum变量中得出总价格">汇总价格，遍历tlist，将每条的num参数和price相乘后得到单品总价，然后相加到pricenum变量中，得出总价格</h3>
<pre><code>        //汇总价格
        pricecount:function(){
            let pricenum=0;
            for(let i=0,l=this.tlist.length;i&lt;l;i++){
                pricenum += this.tlist[i].price*this.tlist[i].num;
            }

            return pricenum;
        },
</code></pre><h3 id="购物车数量的减少thistlistindexnum0判断数量是否大于0如果大于0则可以减如果小于0不改变">购物车数量的减少，this.tlist[index].num&gt;0判断数量是否大于0，如果大于0则可以减，如果小于0，不改变</h3>
<pre><code>        //购物车减法
        minus:function(index){
            if(this.tlist[index].num&gt;0){
                this.tlist[index].num--
            }else{
                this.tlist[index].num
            }
        },
</code></pre><h3 id="购物车数量的增加将下标传下来将数量进行增加一次加1">购物车数量的增加，将下标传下来，将数量进行增加，一次加1</h3>
<pre><code>        //购物车加法
        add:function(index){
            this.tlist[index].num++
        }
    }

}
&lt;/script&gt;

&lt;style&gt;

.on {background-color: blue;color:thistle;font-size: 20px}
.off {background-color: red;color: black;font-size: 30px}

&lt;/style&gt;

</code></pre><h1 id="vue-中的方法">vue 中的方法</h1>
<h3 id="v-html-展示变量">v-html=&rdquo;&rdquo; 展示变量</h3>
<h3 id="v-show-如果是true则显示如果是flase则不显示">v-show=&rdquo;&rdquo; 如果是True则显示，如果是Flase则不显示</h3>
<h3 id="v-iftype判断条件满足时显示">v-if=&quot;type===&rsquo;'&ldquo;判断条件满足时显示</h3>
<h3 id="v-else-iftype--判断满足条件时显示">v-else-if=&quot;type === &lsquo;'&ldquo;判断满足条件时显示</h3>
<h3 id="v-else--如果条件都不满足则显示">v-else  如果条件都不满足则显示</h3>
<h3 id="v-foritemindex-in-tlist-遍历tlist提取其中的item和index">v-for=&rdquo;(item,index) in tlist&rdquo; 遍历tlist，提取其中的item和index</h3>
<p><img src="/hugo_blog/5ba58572111d481045b9894394b50afe.jpg" alt="美图"></p>

</div>


    </main>

    
  </body>
</html>
